<template>
  <view>
    <view class="gauge">
      <view class="title">血压(收缩压)</view>
      <canvas
        canvas-id="bloodPressure"
        id="bloodPressure"
        type="2d"
        class="charts"
        @touchend="tap"
      />
      <view class="inBox">
        <view>新指标: </view>
        <input class="input" type="number" v-model="bloodPressure" />
        <view class="submit" @click="submit">提交</view>
      </view>
    </view>

    <view class="gauge">
      <view class="title">血脂</view>
      <canvas
        canvas-id="bloodFat"
        id="bloodFat"
        type="2d"
        class="charts"
        @touchend="tap"
      />
      <view class="inBox">
        <view>新指标: </view>
        <input class="input" type="digit" v-model="bloodFat" />
        <view class="submit" @click="submit">提交</view>
      </view>
    </view>

    <view class="gauge">
      <view class="title">血糖(空腹)</view>
      <canvas
        canvas-id="bloodSugar"
        id="bloodSugar"
        type="2d"
        class="charts"
        @touchend="tap"
      />
      <view class="inBox">
        <view>新指标: </view>
        <input class="input" type="digit" v-model="bloodSugar" />
        <view class="submit" @click="submit">提交</view>
      </view>
    </view>

    <view class="gauge">
      <view class="title">静息心率</view>
      <canvas
        canvas-id="heartRate"
        id="heartRate"
        type="2d"
        class="charts"
        @touchend="tap"
      />
      <view class="inBox">
        <view>新指标: </view>
        <input class="input" type="number" v-model="heartRate" />
        <view class="submit" @click="submit">提交</view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js";
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500,
      pixelRatio: 2,
      bloodPressure: "", //血压
      bloodFat: "", //血脂,
      bloodSugar: "", //血糖
      heartRate: "", //心率
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
    this.getServerData();
  },
  methods: {
    getServerData() {
      // 获取血压数据
      uni.$http.get("/categories/query/bp").then(({ data: ret }) => {
        let res = {
          categories: ret.categories.categorieList,
          series: [ret.categories.series],
          title: "血压(收缩压)",
          min: 20,
          max: 190,
          curr: ret.value + "/mmHg",
        };
        this.bloodPressure = ret.value;
        this.drawCharts("bloodPressure", res);
      });
      // 获取血脂数据
      uni.$http.get("/categories/query/bf").then(({ data: ret }) => {
        let res = {
          categories: ret.categories.categorieList,
          series: [ret.categories.series],
          title: "血脂",
          min: 0,
          max: 6.7,
          curr: ret.value + "/mmoi/L",
        };
        this.bloodFat = ret.value;
        this.drawCharts("bloodFat", res);
      });
      // 获取血糖数据
      uni.$http.get("/categories/query/bs").then(({ data: ret }) => {
        let res = {
          categories: ret.categories.categorieList,
          series: [ret.categories.series],
          title: "血糖(空腹)",
          min: 2,
          max: 10,
          curr: ret.value + "/mmoi/L",
        };
        this.bloodSugar = ret.value;
        this.drawCharts("bloodSugar", res);
      });

      // 获取心率数据
      uni.$http.get("/categories/query/hr").then(({ data: ret }) => {
        console.log(ret);
        let res = {
          categories: ret.categories.categorieList,
          series: [ret.categories.series],
          title: "静息心率",
          min: 20,
          max: 160,
          curr: ret.value + "次/分钟",
        };
        this.heartRate = ret.value;
        this.drawCharts("heartRate", res);
      });
    },
    submit() {
      let query = {
        bloodPressure: +this.bloodPressure,
        bloodFat: +this.bloodFat,
        bloodSugar: +this.bloodSugar,
        heartRate: +this.heartRate,
      };
      for (const key in query) {
        console.log(typeof query[key]);
        if (typeof query[key] != "number")
          return uni.$showMsg("请输入准确数值");
      }
      uni.$http
        .post("/health/insert", query)
        .then(() => {
          this.getServerData();
          uni.$showMsg("更新身体数据成功");
        })
        .catch((err) => {
          uni.$showMsg("添加数据失败");
          console.log(err);
        });
    },
    drawCharts(id, data) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#" + id)
        .fields({ node: true, size: true })
        .exec((res) => {
          if (res[0]) {
            const canvas = res[0].node;
            const ctx = canvas.getContext("2d");
            canvas.width = res[0].width * this.pixelRatio;
            canvas.height = res[0].height * this.pixelRatio;
            uChartsInstance[id] = new uCharts({
              type: "gauge",
              context: ctx,
              width: this.cWidth * this.pixelRatio,
              height: this.cHeight * this.pixelRatio,
              categories: data.categories,
              series: data.series,
              pixelRatio: this.pixelRatio,
              animation: true,
              background: "#FFFFFF",
              color: [
                "#1890FF",
                "#91CB74",
                "#FAC858",
                "#EE6666",
                "#73C0DE",
                "#3CA272",
                "#FC8452",
                "#9A60B4",
                "#ea7ccc",
              ],
              padding: undefined,
              title: {
                name: data.title,
                fontSize: 25,
                color: "#2fc25b",
                offsetY: 50,
              },
              subtitle: {
                name: data.curr,
                fontSize: 20,
                color: "#666666",
                offsetY: -50,
              },
              extra: {
                gauge: {
                  type: "default",
                  width: 30,
                  labelColor: "#666666",
                  startAngle: 0.75,
                  endAngle: 0.25,
                  startNumber: data.min,
                  endNumber: data.max,
                  formatter: (val) => {
                    if (val % 1 === 0) return val;
                    return val.toFixed(1); //此处为保留一位小数
                  },
                  labelFormat: "",
                  splitLine: {
                    fixRadius: 0,
                    splitNumber: 10,
                    width: 30,
                    color: "#FFFFFF",
                    childNumber: 5,
                    childWidth: 12,
                  },
                  pointer: {
                    width: 24,
                    color: "auto",
                  },
                },
              },
            });
          } else {
            console.error("[uCharts]: 未获取到 context");
          }
        });
    },
    tap(e) {
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },
  },
};
</script>

<style scoped lang="less">
.charts {
  width: 700rpx;
  height: 480rpx;
  min-height: 480rpx;
}

.gauge {
  border-bottom: 2px solid #cccccc;
  margin: 0 25rpx 40rpx;
  border-radius: 25rpx;
  box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  .title {
    font-weight: 700;
    padding-left: 40rpx;
    font-size: 45rpx;
    line-height: 75rpx;
    border-bottom: 1px solid #cccccc;
  }
}
canvas {
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20rpx;
}

.inBox {
  width: 65%;
  display: flex;
  margin-bottom: 20rpx;
  justify-content: space-between;
  margin-left: 17%;
  align-items: center;
  font-size: 40rpx;

  .input {
    flex: 1;
    border: 2px solid #cccccc;
    border-right: none;
    height: 66rpx;
    padding-left: 20rpx;
    font-size: 36rpx;
    color: orangered;
    font-weight: 700;
  }

  .submit {
    background-color: orange;
    height: 74rpx;
    line-height: 74rpx;
    padding: 0 20rpx;
    color: white;
  }
}
</style>
